<template>
  <div>
    <div v-if="roles.includes('channel') || roles.includes('teacher')">
      <div class="pageTopTitle">渠道工作台</div>
      <div class="app-container">
        <div class="fs-18 f-w-bolder mb20">数据看板</div>
        <el-row :gutter="20">
          <el-col :span="roles.includes('channel') ? 6 : 8">
            <div class="box-item">
              <div class="fs-18">总业绩</div>
              <div class="mt16">
                <span class="fs-36 f-w-bolder">{{ pageData.业绩数据.签约金额 }}</span>
                <span class="fs-14 ml5 " style="color: #898B8F">元<span class="fs-12 ml5">(签)</span></span>

                <span class="fs-22 f-w-bolder ml20">{{ pageData.业绩数据.收款金额 }}</span>
                <span class="fs-14 ml5 " style="color: #898B8F">元<span class="fs-12 ml5">(款)</span></span>

              </div>
              <div class="mt10">
                <span class="fs-12 mr5" style="color: #898B8F">上月(款)</span>
                <span class="fs-14 f-w-bolder">¥ {{ pageData.业绩数据.上月 }}</span>

                <span class="fs-12 ml30 mr5" style="color: #898B8F">本月(款)</span>
                <span class="fs-14 f-w-bolder" style="color: #00B42A">¥ {{ pageData.业绩数据.本月 }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="roles.includes('channel') ? 6 : 8">
            <div class="box-item">
              <img src="@/assets/images/kh.png" class="box-icon">
              <div class="fs-18">客户数</div>
              <div class="mt16">
                <span class="fs-36 f-w-bolder">{{ pageData.客户数据.全部 }}</span>
                <span class="fs-14 ml5 " style="color: #898B8F">个</span>
              </div>
              <div class="mt10">
                <span class="fs-12 mr5" style="color: #898B8F">上月</span>
                <span class="fs-14 f-w-bolder">{{ pageData.客户数据.上月.全部 }}</span>

                <span class="fs-12 ml30 mr5" style="color: #898B8F">本月</span>
                <span class="fs-14 f-w-bolder" style="color: #00B42A">{{ pageData.客户数据.本月.全部 }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="roles.includes('channel') ? 6 : 8">
            <div class="box-item">
              <img src="@/assets/images/xm.png" class="box-icon">
              <div class="fs-18">项目数</div>
              <div class="mt16">
                <span class="fs-36 f-w-bolder">{{ pageData.项目数据.全部 }}</span>
                <span class="fs-14 ml5 " style="color: #898B8F">个</span>
              </div>
              <div class="mt10">
                <span class="fs-12 mr5" style="color: #898B8F">上月</span>
                <span class="fs-14 f-w-bolder">{{ pageData.项目数据.上月.全部 }}</span>

                <span class="fs-12 ml30 mr5" style="color: #898B8F">本月</span>
                <span class="fs-14 f-w-bolder" style="color: #00B42A">{{ pageData.项目数据.本月.全部 }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" v-if="roles.includes('channel')">
            <div class="box-item">
              <img src="@/assets/images/qd.png" class="box-icon">
              <div class="fs-18">下级渠道</div>
              <div class="mt16">
                <span class="fs-36 f-w-bolder">{{ pageData.下级渠道.全部 }}</span>
                <span class="fs-14 ml5 " style="color: #898B8F">个</span>
              </div>
              <div class="mt10">
                <span class="fs-12 mr5" style="color: #898B8F">上月</span>
                <span class="fs-14 f-w-bolder">{{ pageData.下级渠道.上月.全部 }}</span>

                <span class="fs-12 ml30 mr5" style="color: #898B8F">本月</span>
                <span class="fs-14 f-w-bolder" style="color: #00B42A">{{ pageData.下级渠道.上月.全部 }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20" class="mt24">
        <el-col :span="6">
          <div class="app-container ">
            <div class="fs-18 f-w-bolder mb24">常用功能</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="app-item ">
                  <img src="@/assets/images/kh.png" class="app-icon">
                  <div class="fs-12" style="color: #898B8F">客户管理</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="app-item ">
                  <img src="@/assets/images/gj.png" class="app-icon">
                  <div class="fs-12" style="color: #898B8F">跟进管理</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="app-item">
                  <img src="@/assets/images/xm.png" class="app-icon">
                  <div class="fs-12" style="color: #898B8F">合作项目</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="app-item">
                  <img src="@/assets/images/qd.png" class="app-icon">
                  <div class="fs-12" style="color: #898B8F">下级渠道</div>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>
        <el-col :span="18">
          <div class="app-container ">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;">
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <span class="fs-18 f-w-bolder">项目数据</span>
                <span class="fs-12 ml10 mr10" style="color: #898B8F;">最新统计：{{ pageData.项目数据.今日.Date || pageData.Date }}</span>
                <el-link icon="el-icon-refresh" style="color: #ff7d00" :underline="false" @click="projectRefresh">刷新</el-link>
              </div>
              <el-radio-group v-model="dateType" size="mini" >
                <el-radio-button label="今日"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="近两个月"></el-radio-button>
                <el-radio-button label="近三个月"></el-radio-button>
                <el-radio-button label="近半年"></el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="12">
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">公开课</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.项目数据[dateType].公开课 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                  <div class="mt16">
                    <span class="fs-12 mb10" style="color: #898B8F;">成交业绩（元）</span>
                    <span class="ml5 fs-16 f-w-bolder" style="color: #F53F3F">¥ {{ pageData.项目数据[dateType].公开课业绩 }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">内训项目</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.项目数据[dateType].内训项目 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                  <div class="mt16">
                    <span class="fs-12 mb10" style="color: #898B8F;">成交业绩（元）</span>
                    <span class="ml5 fs-16 f-w-bolder" style="color: #F53F3F">¥ {{ pageData.项目数据[dateType].内训项目业绩 }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">咨询项目</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.项目数据[dateType].咨询项目 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                  <div class="mt16">
                    <span class="fs-12 mb10" style="color: #898B8F;">成交业绩（元）</span>
                    <span class="ml5 fs-16 f-w-bolder" style="color: #F53F3F">¥ {{ pageData.项目数据[dateType].咨询项目业绩 }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">陪跑项目</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.项目数据[dateType].陪跑项目 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                  <div class="mt16">
                    <span class="fs-12 mb10" style="color: #898B8F;">成交业绩（元）</span>
                    <span class="ml5 fs-16 f-w-bolder" style="color: #F53F3F">¥ {{ pageData.项目数据[dateType].咨询项目业绩 }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">其他</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.项目数据[dateType].其他项目 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                  <div class="mt16">
                    <span class="fs-12 mb10" style="color: #898B8F;">成交业绩（元）</span>
                    <span class="ml5 fs-16 f-w-bolder" style="color: #F53F3F">¥ {{ pageData.项目数据[dateType].其他项目业绩q }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="app-container mt24">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;">
              <div>
                <span class="fs-18 f-w-bolder">客户数据</span>
                <span class="fs-12 ml10 mr10" style="color: #898B8F;">最新统计：{{ pageData.客户数据.今日.Date ||  pageData.Date }}</span>
                <el-link icon="el-icon-refresh" style="color: #ff7d00" :underline="false" @click="clientRefresh">刷新</el-link>
              </div>
              <el-radio-group v-model="dateType" size="mini" @change="clientChange">
                <el-radio-button label="今日"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="近两个月"></el-radio-button>
                <el-radio-button label="近三个月"></el-radio-button>
                <el-radio-button label="近半年"></el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="12">
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">企业</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.客户数据[dateType].企业客户 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">机构</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.客户数据[dateType].机构客户 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">政府</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.客户数据[dateType].政府客户 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>

              </el-col>
              <el-col :span="5">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">个人</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.客户数据[dateType].个人客户 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">其他</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.客户数据[dateType].其他客户 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="app-container mt24" v-if="roles.includes('channel')">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;">
              <div>
                <span class="fs-18 f-w-bolder">下级渠道数据</span>
                <span class="fs-12 ml10 mr10" style="color: #898B8F;">最新统计：{{  pageData.下级渠道.今日.Date || pageData.Date }}</span>
                <el-link icon="el-icon-refresh" style="color: #ff7d00" :underline="false" @click="channelRefresh">刷新</el-link>
              </div>
              <el-radio-group v-model="dateType" size="mini">
                <el-radio-button label="今日"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="近两个月"></el-radio-button>
                <el-radio-button label="近三个月"></el-radio-button>
                <el-radio-button label="近半年"></el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="12">
              <el-col :span="6">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">渠道总数</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">{{ pageData.下级渠道[dateType].下级渠道 }}</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">项目总数</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">0</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">成交业绩</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">0</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">元</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div style="text-align: left">
                  <div class="fs-14 mb20" style="color: #333333;">客户总数</div>
                  <div>
                    <span class="fs-32 f-w-bolder ">0</span>
                    <span class="fs-12 ml5 " style="color: #898B8F">个</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

     </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { IndexData,refreshClient,refreshProject,refreshChannel } from  '@/api/system/index'
import client from '@/views/web/client/index.vue'
import channel from '@/views/web/channel/index.vue'

export default {
  name: 'Index',

  computed: {
    ...mapGetters([
      'avatar',
      'name',
      'roles',
      'channelId'
    ])
  },
  data() {
    return {
      dateType: '今日',
      pageData: {},
    }
  },


  created() {
    // 渠道与专家数据
    if(this.roles.includes('channel') || this.roles.includes('teacher')) {
      IndexData().then(resp=>{
        console.info(resp)
        this.pageData = resp.data
      })
    }
  },

  methods: {
    clientChange(){
      console.info(this.dateType)
    },

    // 项目数据刷新
    projectRefresh(){
      refreshProject(this.dateType).then(resp=>{
        this.pageData.项目数据.今日 = resp.data
      })
    },
    // 客户数据刷新
    clientRefresh(){
      console.info(this.dateType)
      refreshClient(this.dateType).then(resp=>{
        this.pageData.客户数据.今日 = resp.data
      })
    },
    channelRefresh(){
      refreshChannel(this.dateType).then(resp=>{
        this.pageData.下级渠道.今日 = resp.data
      })
    },

  },

}
</script>

<style scoped lang="scss">
.box-item {
  position: relative;
  background-color: #F3F5F7;
  padding: 20px 24px;
  border-radius: 8px;

  .box-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 36px;
    right: 28px;
  }
}

.app-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  padding: 42px 0;

  .app-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
}

</style>

